import PropTypes from "prop-types";
import React, { Component } from "react";
import "./Middle.css";

class Middle extends Component {
  static propTypes = {
    middlearr: PropTypes.array.isRequired,
    changeck: PropTypes.func.isRequired,
  };

  static defaultProps = {
    str: "这是moddle组件中默认的数据",
  };

  render() {
    let { middlearr, changeck, str } = this.props; //通过props  数据来操作页面
    // let { middlearr } = this.state;     //通过自身的 state 数据  来操作页面
    return (
      <div className="middle">
        <h1>{str}</h1>
        <ul>
          {middlearr.map((item, index) => {
            return (
              <li key={index} onClick={changeck(index)}>
                <h1>{item.title}</h1>
                {item.checked ? <h2>{item.cont}</h2> : null}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default Middle;
